<template>
  <div class="z-time-picker-wrapper">
    <z-select columns
              v-model="show"
              :title="title"
              :maskClick="maskClick"
              :cancelText="cancelText"
              :okText="okText"
              :zIndex="zIndex"
              :selectedIndex="timeIndex"
              :data="time"
              @ok="ok">
    </z-select>
  </div>
</template>

<script type="text/ecmascript-6">
  import ZSelect from '../select/select.vue'
  export default {
    name: 'z-time-picker',
    props: {
      value: Boolean,
      title: String,
      cancelText: String,
      okText: String,
      selectedIndex: { // 默认选中的下标数组（支持填写文本信息）
        type: Array,
        default: function () {
          return []
        }
      },
      maskClick: {
        type: Boolean,
        default: true
      },
      zIndex: Number
    },
    data () {
      return {
        show: false,
        time: [],
        timeIndex: [], //默认选中
        now: undefined // 初始化的时候的当前日期
      }
    },
    components: {ZSelect},
    mounted () {
    },
    methods: {
      initTimePicker () {
        this.now = new Date()
        this.initYear()
        this.initMonth()
        this.initDay()
        this.initHour()
        this.initMinute()
      },
      initYear () {
        let years = []
        for (let i = 0; i < 20; i++) {
          years.push(this.now.getFullYear() + i)
        }
        this.time.push(years)
      },
      initMonth () {
        let months = []
        for (let i = 1; i <= 12; i++) {
          months.push(i < 10 ? '0' + i : i)
        }
        this.time.push(months)
      },
      initDay () {
        let days = []
        for (let i = 1; i <= this.getDaysFromMonth(this.now); i++) {
          days.push(i < 10 ? '0' + i : i)
        }
        this.time.push(days)
      },
      initHour () {
        let hours = []
        for (let i = 1; i <= 23; i++) {
          hours.push(i < 10 ? '0' + i : i)
        }
        this.time.push(hours)
      },
      initMinute () {
        let minutes = []
        for (let i = 1; i <= 59; i++) {
          minutes.push(i < 10 ? '0' + i : i)
        }
        this.time.push(minutes)
      },
      getDaysFromMonth (date) {
        var temp = new Date(date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate())
        temp.setMonth(date.getMonth() + 1)
        temp.setDate(0)
        return temp.getDate() ? temp.getDate() : 30
      },
      ok (val) {
        let timeStr = ''
        val.value.forEach((t, index) => {
          if (index < 2) { // month
            timeStr += t + '-'
          }
          if (index === 2) {
            timeStr += t + ' '
          }
          if (index > 2) {
            timeStr += t + ':'
          }
        })

        let seconds = this.now.getSeconds()
        timeStr += seconds < 10 ? '0' + seconds : seconds
        this.$emit('ok', timeStr)
      }
    },
    watch: {
      value (val) {
        this.show = val
        if (val) {
          this.initTimePicker()
        } else {
          this.time = []
          this.timeIndex = []
          this.now = undefined
        }
      },
      show (val) {
        this.$emit('input', val)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
